<template>
	<!-- 话题组件的封装 -->
	<view>
		<!-- 模糊背景 -->
		<view class="topic-detail-top-bg">
			<image :src="item.titlepic" mode="aspectFill" lazy-load="true"></image>
		</view>
		<!-- 话题信息 -->
		<view class="topic-detail-info">
			<view class="topic-detail-info-title flex">
				<image :src="item.titlepic" mode=""></image>
				<view class="color-333-size-18 ml10 flex1">#{{ item.title }}#</view>
			</view>
			<view class="flex ml20 pt10">
				<view class="color-999-size-14">动态 {{ item.totalNum }} </view>
				<view class="ml10 color-999-size-14">今日 {{ item.todayNum }}</view>
			</view>
			<view class="color-666-size-16 ml20">
				{{ item.desc }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object
		}
	}
</script>
<style lang="scss">
.topic-detail-top-bg{
	position: relative;
	height: 300upx;
	overflow: hidden;
	image {
		width: 100%;
		filter: blur(10px);
	}
}
.topic-detail-info{
	// position: absolute;
	.topic-detail-info-title {
		margin-top: -75upx;
		image {
			width: 150upx;
			height: 150upx;
			border-radius: 20upx;
			margin-left: 40upx;
		}
		&>view {
			margin-top: 70upx;
		}
	}
	.topic-detail-info-con{
		
	}
}
</style>
